<template>
  <div class="login-container">
    <!-- 主体部分 -->
    <div class="main">
      <div class="wrap">
        <div class="login-icon">
          <img src="@/img/login_icon.png" alt="" />
        </div>
        <div class="content">
          <h3>欢迎登录</h3>
          <form id="login">
            <div class="select">
              <label for="Role">Role</label>
              <select id="select-role" v-model="role">
                <option>管理员</option>
                <option>教师</option>
                <option>学生</option>
              </select>
              <span>请选择您的登录身份</span>
            </div>
            <div class="uname">
              <label for="uname">Username</label>
              <input type="text" class="form-control" placeholder="请输入学号" id="uname" v-model.trim="uname" @blur="unameReg" />
              <span style="color: red" v-show="uWrong">您输入的学号位数有误，请重新输入</span>
            </div>
            <div class="pwd">
              <span class="visible" @click="pwdVisible"></span>
              <label for="pwd">Password</label>
              <input type="password" class="form-control" placeholder="请输入密码" id="pwd" v-model.trim="pwd" />
              <span style="color: red" v-show="pWrong">请您输入密码，初始密码为123456</span>
            </div>
            <div class="checkbox">
              <label> <input type="checkbox" /> Remember me </label>
            </div>
            <!-- <input type="button" value="登录" class="btn" @click="login" /> -->
            <!-- <span class="btn">
              <router-link to="/index" @click="login">登录</router-link>
            </span> -->
            <router-link to="/index" class="btn" @click="login">登录</router-link>
            <!-- <input type="button" value="注册" class="btn register" @click="register" /> -->
            <!-- <span class="btn">
              <router-link to="/register">注册</router-link>
            </span> -->
            <router-link to="/register" class="btn">注册</router-link>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role: '管理员',
      uname: 'admin',
      pwd: 'admin',
      visible: false,
      uWrong: false,
      pWrong: false,
    }
  },
  methods: {
    // 正则验证用户名
    unameReg(e) {
      var uReg = /^\d{12}$/
      if (!uReg.test(this.uname)) {
        this.uWrong = true
      } else {
        this.uWrong = false
      }
    },
    // 密码是否可见
    pwdVisible(e) {
      this.visible = !this.visible
      if (this.visible) {
        // 图标改为可见，输入框改为text类型
        e.target.innerHTML = ''
        e.target.nextElementSibling.nextElementSibling.type = 'text'
      } else {
        e.target.innerHTML = ''
        e.target.nextElementSibling.nextElementSibling.type = 'password'
      }
    },
    // 跳转到首页
    login(e) {
      // 首先检查是否输入密码
      if (this.pwd === '') {
        this.pWrong = true
      } else {
        this.pWrong = false
        if (this.uname === '') {
          // 检查学号是否有误
          this.unameReg()
        } else {
          console.log('success')
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.main {
  height: 500px;
  background-color: rgb(241, 243, 244);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.wrap {
  width: 900px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.login-icon {
  width: 500px;
  height: 400px;
}
.login-icon img {
  width: 100%;
  height: 100%;
}
.content {
  width: 400px;
  height: 450px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
}
.content h3 {
  display: block;
  width: 360px;
  height: 40px;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}
.content form {
  display: block;
  width: 360px;
  height: 400px;
  font-size: 16px;
  color: #000;
  box-sizing: border-box;
  padding: 20px;
}
#login > div {
  position: relative;
  width: 360px;
  height: 80px;
}
#login > .checkbox {
  height: 40px;
}
#login > div > label {
  display: block;
}
#login > div > input {
  width: 300px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
#select-role {
  position: absolute;
  border: 1px solid #ccc;
  width: 80px;
  height: 30px;
}
.select span {
  position: absolute;
  font-size: 16px;
  right: 120px;
  color: #ccc;
}
.uname,
.pwd {
  position: relative;
}
.uname span,
.pwd span {
  display: block;
  font-size: 14px;
}
.pwd::before,
.uname::before {
  position: absolute;
  top: 27px;
  left: 10px;
  content: '';
  font-family: 'icomoon';
}
.uname::before {
  content: '';
}
#uname,
#pwd {
  padding-left: 30px;
}
.visible {
  font-family: 'icomoon';
  color: #000;
  font-size: 18px;
  position: absolute;
  top: 27px;
  right: 70px;
}
.visible:hover {
  cursor: pointer;
}
.content .btn {
  display: inline-block;
  width: 70px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #000;
  font-size: 14px;
  border: 1px solid #ccc;
  background-color: rgb(239, 239, 239);
  margin: 10px 45px 0;
  border-radius: 5px;
}
</style>
